<template>
  <div class="doctor-list">
    <div class="head">
      <p>推荐关注</p>
      <a href="javascript:;">
        查看更多<i class="van-icon van-icon-arrow"></i
      ></a>
    </div>
    <div class="body">
      <!-- <van-swipe
        :width="(150 / 375) * width"
        :show-indicators="false"
        :loop="false"
      >
        <van-swipe-item v-for="item in list" :key="item.id">
          <doctor-item :doctor="item"></doctor-item>
        </van-swipe-item>
      </van-swipe> -->
      <template v-for="item in list" :key="item.id">
        <doctor-item :doctor="item"></doctor-item>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApiRes } from '@/types/data'
import { Doctors, Doctor } from '@/types/doctor'
import request from '@/utils/request'
import { ref, onMounted } from 'vue'
import DoctorItem from './doctor-item.vue'
// import { useWindowSize } from '@vueuse/core'
// const { width } = useWindowSize()
const list = ref([] as Doctor[])
const loadData = async () => {
  const res = await request.get<ApiRes<Doctors>>('home/page/doc', {
    params: {
      current: 1,
      pageSize: 5
    }
  })

  if (res.data.code === 10000) {
    list.value = res.data.data.rows
  }
}
onMounted(() => loadData())
</script>

<style lang="scss" scoped>
.doctor-list {
  background-color: var(--cp-bg);
  height: 250px;
  .head {
    display: flex;
    justify-content: space-between;
    height: 45px;
    align-items: center;
    padding: 0 15px;
    font-size: 13px;
    > a {
      color: var(--cp-tip);
    }
  }
  .body {
    width: 100%;
    overflow: scroll;
    display: flex;
    padding-right: 15px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .body::-webkit-scrollbar {
    display: none;
  }
}
</style>
